<template>
  <div id="root" v-if="islogin">
    <div class="header">
      <div class="head">
        <van-image
          round
          width="4rem"
          height="4rem"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />

        <span>{{ userName }}</span>
        <button type="warning">编辑资料</button>
      </div>
      <div class="msg">
        <div>
          <span>{{ userInfo.art_count }}</span>
          <span>头条</span>
        </div>
        <div>
          <span>{{ userInfo.fans_count }}</span>
          <span>关注</span>
        </div>
        <div>
          <span>{{ userInfo.follow_count }}</span>
          <span>粉丝</span>
        </div>
        <div>
          <span>{{ userInfo.like_count }}</span>
          <span>获赞</span>
        </div>
      </div>
    </div>
    <div class="footer" :style="{ height: height + 'rem' }">
      <div class="stars">
        <div>
          <van-icon name="star-o" size="0.8rem" color="red" />
          <span>收藏</span>
        </div>
        <div>
          <van-icon name="underway-o" size="0.8rem" color="red" />
          <span>历史</span>
        </div>
      </div>
      <div>
        <van-cell title="消息通知" is-link to="index" />
        <van-cell title="小智同学" is-link to="index" />
      </div>
      <button @click="offLogin">退出登录</button>
    </div>
  </div>
  <div class="noLogin" v-else>
    <van-image
      round
      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    >
      <template v-slot:loading>
        <van-loading type="spinner" size="20" />
      </template>
    </van-image>

    <van-button @click="goLogin" class="btn" type="primary"
      >去登录/注册</van-button
    >
  </div>
</template>

<script>
import { Dialog } from "vant";
import { computed, toRefs, onMounted, reactive } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { mapState, useStore } from "vuex";
export default {
  setup(props) {
    const router = useRouter();
    const store = useStore();
    let islogin;
    let userName;
    let userPwd;
    //登陆注册
    try {
      islogin = computed(() => store.state.login.userMsg.myToken); //判断是否登录成功
      userName = computed(() => store.state.login.userMsg.data.userName); //如果属性不存在
      userPwd = computed(() => store.state.login.userMsg.data.userPwd);
    } catch (e) {
      islogin = false;
      userName = "";
    }
    let width = document.documentElement.clientWidth / 10;
    let height =
      document.documentElement.clientHeight / width - (96 + 350) / 37.5; //获取设备高度
    let goLogin = function () {
      router.push({
        name: "login",
      });
    };

    //获取用户信息
    onMounted(() => {
      if (islogin != "") {
        const id = store.state.login.userMsg.data.id;
        store.dispatch("UserInfo", id); //获取用户信息
      }
    });
    const userInfo = computed(() => store.state.login.userInfo);

    //退出登录
    let offLogin = function () {
      store.dispatch("offLogin", { userName, userPwd });
    };
    return {
      goLogin,
      islogin,
      userName,
      height,
      offLogin,
      userInfo,
    };
  },
};
</script>

<style lang="less">
.noLogin {
  height: 350px;
  background-color: #3296fa;
}
.van-button {
  position: absolute;
  top: 450px;
  left: 50%;
  transform: translate(-50%);
}
#root {
  font-size: 18px;
  color: aliceblue;
  .header {
    background-color: #3296fa;
    height: 350px;
    width: 100%;
    .head {
      height: 250px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      button {
        height: 35px;
        text-align: center;
        border-radius: 20px;
        color: black;
        font-size: 15px;
        background-color: antiquewhite;
      }
    }
    .msg {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
  .footer {
    color: black;
    font-size: 15px;
    position: relative;
    .stars {
      height: 60px;
      border-bottom: 1px solid rgb(235, 235, 235);
      display: flex;
      justify-content: space-arounds;
      align-items: center;
      & > div {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: center;
      }
    }
    button {
      position: absolute;
      left: 50%;
      top: 160px;
      transform: translate(-50%);
      background-color: aliceblue;
      border: 1px solid gray;
      width: 80%;
      padding: 10px;
      border-radius: 50px;
    }
  }
}
</style>